<template>
  <div class="composition-right">
    <div class="tooltip"></div>
  </div>
</template>
<script>
import compositionBarChart from "../../charts/composition-right/index.js";
import bus from "../../bus";
import { mapGetters } from "vuex";

export default {
  name: "AppComposition",
  watch: {
    compositionRightData() {
      compositionBarChart.update(this.compositionRightData, this.template);
    },
    left() {
      compositionBarChart.update();
    },
    right() {
      compositionBarChart.update();
    }
  },
  mounted() {
    compositionBarChart.init({
      target: ".composition-right",
      margin: { top: 50, right: 20, bottom: 50, left: 20 }
    });
  },
  computed: {
    ...mapGetters({
      left: "layout/getShowLeft",
      right: "layout/getShowRight",
      compositionRightData: "api/getCompositionRight",
      template: "api/getTemplate"
    })
  }
};
</script>
<style>
.composition .axis path {
  stroke: transparent;
}
.composition .axis .tick line {
  stroke: transparent;
}

.composition rect.active.level-1 {
  fill: #a6cee3;
}
.composition rect.active.level-2 {
  fill: #1f78b4;
}

.composition rect,
.composition.level-2 rect {
  fill: transparent;
  stroke: #000;
  stroke-width: 0.3;
}
.custom-user-bar {
  fill: #b2df8a;
}
.consumption-ability-bar {
  fill: #33a02c;
}
.mobile-device-user-bar {
  fill: #fb9a99;
}
.flow-attributes-bar {
  fill: #e31a1c;
}
.atmosphere-bar {
  fill: #fdbf6f;
}
.composition-right {
  height: 100%;
}
</style>


